<template>
  <div class="head">
    <p class="title">路信云平台大数据展示中心</p>
    <div class="date-wrap">
      <span class="date"> {{ dateTime.date }} </span>
      <span class="week"> {{ dateTime.week }} </span>
      <span class="time"> {{ dateTime.time }} </span>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from "vue";
const dateTime = ref({});
const getDateTime = () => {
  const now = new Date();

  const year = now.getFullYear();
  const month = String(now.getMonth() + 1).padStart(2, "0");
  const day = String(now.getDate()).padStart(2, "0");
  const date = `${year}-${month}-${day}`;
  const weekDays = [
    "星期日",
    "星期一",
    "星期二",
    "星期三",
    "星期四",
    "星期五",
    "星期六",
  ];
  const week = weekDays[now.getDay()];

  const hours = String(now.getHours()).padStart(2, "0");
  const minutes = String(now.getMinutes()).padStart(2, "0");
  const seconds = String(now.getSeconds()).padStart(2, "0");
  const time = `${hours}:${minutes}:${seconds}`;
  dateTime.value = { date, week, time };
};

let timer = null;
const init = () => {
  getDateTime();
  timer = setInterval(() => {
    getDateTime();
  }, 1000);
};
onMounted(() => {
  init();
});

onUnmounted(() => {
  clearInterval(timer);
});
</script>
<style scoped lang='scss'>
.head {
  width: 4160px;
  height: 103px;
  background: url("@/assets/longscreen3/bg_head.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center center;
  display: flex;
  position: relative;
  .title {
    padding-top: 16px;
    margin: 0 auto;
    font-family: PangMenZhengDao;
    font-size: 48px;
    color: #ddecff;
    line-height: 55px;
    letter-spacing: 6px;
    text-shadow: 0px 2px 20px #3c86ff;
    font-style: normal;
  }
  .date-wrap {
    position: absolute;
    top: 18px;
    right: 60px;
    .date {
      font-family: DIN, DIN;
      font-weight: normal;
      font-size: 20px;
      color: #3e8bf3;
      line-height: 24px;
      text-align: left;
      font-style: italic;
    }
    .week {
      font-family: TencentSansW7;
      font-size: 20px;
      color: #3e8bf3;
      line-height: 24px;
      text-align: left;
      font-style: normal;
      margin-left: 30px;
    }
    .time {
      font-family: DIN, DIN;
      font-weight: normal;
      font-size: 28px;
      color: #e9f9fe;
      line-height: 24px;
      text-shadow: 0px 0px 10px #3f87e8;
      text-align: left;
      font-style: italic;
      margin-left: 30px;
    }
  }
}
</style>